<template>
    <div class="village">
        <div class="main-tile">小区管理-查询</div>
        <div class="main-content">
            <span>小区名称：</span>
            <Input v-model="villageName" placeholder="" class="input-short"/>
            <span>物业电话：</span>
            <Input v-model="villagePhone" placeholder="" class="input-long"/>
            <Button type="primary" @click="getVillageData(villageName,villagePhone)">查询</Button>
            <Table class="main-table" border height="300" :columns="villageColumns" :data="villageCurrnData">
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" class="table-btn" size="small" @click="villageDetail(row,index)">详情</Button>
                </template>
            </Table>
            <Page :total="villageCurrnData.length" @on-change="changePage" :page-size="3" show-total class="text-center"/>
        </div>
        <Modal fullscreen footer-hide v-model="villageDetailshow" title="小区详情">
            <div slot="header" class="villageDetailTitle">
                小区详情 ( {{currntVillage.name}} )
            </div>
            <div class="main-tile">小区信息</div>
            <Row class="main-content">
                <Col span="8">
                小区名称：{{currntVillage.name}}
                </Col>
                <Col span="8">
                物业电话：{{currntVillage.phoneNumber}}
                </Col>
                <Col span="8">
                小区地址：{{currntVillage.address}}
                </Col>
            </Row>
            <div class="main-tile">负责人信息</div>
            <Row class="main-content">
                <Col span="8">
                姓名：{{currntVillage.staffName}}
                </Col>
                <Col span="8">
                电话：{{currntVillage.personLiablePhone}}
                </Col>
            </Row>
            <div class="main-tile">
                员工信息
                <Button type="primary" size="small" class="float-right add-btn">+添加</Button>
            </div>
            <Row class="main-content">
                <Table class="main-table" border height="184" :columns="villageDeatilColumns" :data="villageDeatilData">
                    <template slot-scope="{ row, index }" slot="activate">
                        <span>{{row.activate=='N'?'未激活':'已激活'}}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" class="table-btn" size="small" @click="changeVillageDetail(row,index)">修改</Button>
                    </template>
                </Table>
            </Row>
            <!--<div class="main-tile">-->
                <!--住户信息-->
                <!--<Button type="primary" size="small" class="float-right add-btn">+添加</Button>-->
            <!--</div>-->
            <!--<Row class="main-content">-->
                <!--<Tree :data="villageTreeData"></Tree>-->
            <!--</Row>-->
        </Modal>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                villageDetailshow:false,
                villageName:'',
                villagePhone:'',
                villageColumns:[
                    {
                        title: '小区名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '物业电话',
                        key: 'phoneNumber',
                        align: 'center',
                    },
                    {
                        title: '小区地址',
                        key: 'address',
                        align: 'center',
                    },
                    {
                        title: '负责人名称',
                        key: 'managerName',
                        align: 'center',
                    },
                    {
                        title: '负责人电话',
                        key: 'managerPhone',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        slot:'action',
                        align: 'center',
                    },
                ],
                villageData:[],
                villageCurrnData:[],
                villageDeatilColumns:[
                    {
                        title: '员工名称',
                        key: 'staffName',
                        align: 'center',
                    },
                    {
                        title: '电话',
                        key: 'phoneNumber',
                        align: 'center',
                    },
                    {
                        title: '是否已经激活',
                        slot: 'activate',
                        align: 'center',
                    },
                    {
                        title: '职位',
                        key: 'position',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                    },

                ],
                villageDeatilData:[],
                currntVillage:{},
                villageTreeData:[
                    {
                        title: '江南小区',
                        children: [
                            {
                                title: '1栋',
                                children: [
                                    {
                                        title: '1号',
                                        children: [
                                            {
                                                title: '101室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '102室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '103室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '104室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                        ]
                                    },
                                    {
                                        title: '2号',
                                        children: [
                                            {
                                                title: '101室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '102室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '103室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '104室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                        ]
                                    }
                                ]
                            },
                            {
                                title: '2栋',
                                children: [
                                    {
                                        title: '1号',
                                        children: [
                                            {
                                                title: '101室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '102室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '103室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '104室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                        ]
                                    },
                                    {
                                        title: '2号',
                                        children: [
                                            {
                                                title: '101室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '102室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '103室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '104室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                        ]
                                    }
                                ]
                            },
                            {
                                title: '3栋',
                                children: [
                                    {
                                        title: '1号',
                                        children: [
                                            {
                                                title: '101室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '102室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '103室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '104室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                        ]
                                    },
                                    {
                                        title: '2号',
                                        children: [
                                            {
                                                title: '101室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '102室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '103室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '104室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                        ]
                                    }
                                ]
                            },
                            {
                                title: '4栋',
                                children: [
                                    {
                                        title: '1号',
                                        children: [
                                            {
                                                title: '101室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '102室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '103室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '104室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                        ]
                                    },
                                    {
                                        title: '2号',
                                        children: [
                                            {
                                                title: '101室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '102室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '103室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                            {
                                                title: '104室',
                                                children: [
                                                    {
                                                        title: '张三'
                                                    },
                                                    {
                                                        title: '李四'
                                                    },
                                                    {
                                                        title: '王五'
                                                    },
                                                    {
                                                        title: '马六'
                                                    },
                                                ]
                                            },
                                        ]
                                    }
                                ]
                            },
                        ]
                    }
                ],
            }
        },
        mounted(){
//            this.getVillageData('','')
        },
        methods: {
            //详情
            villageDetail(item,index){
                this.$axios.post(this.$api.queryCommunityDetail,{
                    communityId:item.communityId,
                })
                    .then(success=>{
                        this.currntVillage=success.data.data
                        this.villageDeatilData=this.currntVillage.employeeInfoRspDTOS.Manage.concat(this.currntVillage.employeeInfoRspDTOS.staff)
                        this.villageDetailshow=true
                    })
                    .catch(error=>{
                        console.log(error.data.data)
                    })

            },
            //员工信息修改
            changeVillageDetail(){

            },
            //获取小区数据
            getVillageData(name,num){
                this.$axios.post(this.$api.queryCommunity,
                    {
                        name:name,
                        phoneNumber:num,
                    })
                    .then(success=>{
                        this.villageData=success.data.data
                        this.changePage(1)
                    })
                    .catch(error=>{
                        console.log(error.data)
                    })
            },
            //改变页数
            changePage(num){
                this.villageCurrnData=this.$utils.sliceArray(this.villageData,3)[num-1]
            },
        }
    }
</script>
<style scoped lang="scss">
    .village{
        .input-short{
            width: 150px;
        }
        .input-long{
            width: 300px;
        }

        .main-table{
            margin: 10px 0;
        }
        .table-btn{
            margin: 3px 0;
        }
        .villageDetailTitle{
            background-color: #2d8cf0;
            color: #fff;
        }
    }
    .main-content{
        padding: 0 18px;
    }
    .add-btn{
        margin-right: 18px;
    }
</style>